{% extends "htmlPages/base.html" %}

        {% block head %}
            <!-- FOR TEXT EDIT BOX! more info at - http://nicedit.com/index.php -->
            <script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
            <script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
            <!--/TEXT EDIT BOX-->
            <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.34/jquery.form-validator.min.js"></script>
            <script> $("#newMessage").validate();</script>


    <script type="text/javascript" src="../static/autocomplete/src/jquery.tokeninput.js"></script>
    <link rel="stylesheet" href="../static/autocomplete/styles/token-input.css" type="text/css" />
    <link rel="stylesheet" href="../static/autocomplete/styles/token-input-facebook.css" type="text/css" />
        <script type="text/javascript">
        $(document).ready(function() {
            $("#recipients").tokenInput([
                {%- for child in children %}
                {id: {{ child.id }}, name: "{{ child.name }}"},{% endfor %}
            ], {
                hintText: "הכניסי שמות ילדים",
                noResultsText: "לא נמצאו ילדים בשם זה",
                searchingText: "מחפש...",
                preventDuplicates: true,
                theme: "facebook"
            });
        });
//                                       );
//        });
        </script>

        {% endblock head %}

        {% block side_navbar %}
           <ul class="nav navbar-nav side-nav">
            <li>
              <a href="/home"><i class="fa fa-desktop"></i>  דף בית </a>
            </li>
            <li>
              <a href="/messages"><i class="fa fa-bullhorn"></i>  לוח מודעות </a>
            </li>
            <li>
              <a href="/privateMessages"><i class="fa fa-edit"></i>  הודעות אישיות </a>
            </li>
            <li>
              <a href="/contactList"><i class="fa fa-file"></i>  דף קשר </a>
            </li>
          </ul>
        {% endblock side_navbar %}

        {% block page_wrapper %}
          <div class="row">
              <div class="col-lg-12">
                  <h1>
    הוספת הודעה חדשה
                    <small>{{ date }}</small>
                   </h1>
                  <br>
              </div>
        </div>

          <div class="row">
              <div class="col-lg-12 pull-right">

                <form role="form" name="newMessage" action="/addMessage" method="post">

                 <div class="row">
                    <div class="col-lg-7 pull-right">
                      <div class="form-group">
                        <label>
נמענים
                            <small>
(השאירי ריק להודעה לכל הורי הילדים)
                            </small>
                        </label>
                        <input type="text" class="form-control" name="recipients" id="recipients">
                      </div>
                    </div>
                </div>
                    
                 <div class="row">
                    <div class="col-lg-7 pull-right">
                      <div class="form-group">
                        <label>
כותרת
                        </label>
                        <input type="text" class="form-control" name="title" id="title" required>
                      </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-7 pull-right">
                        <div class="form-group">
                        <label>
תוכן ההודעה
                        </label>
                           <textarea class="form-control" rows="10" name="message" id="message"></textarea>
                        </div>
                    </div>
                </div>


            <button type="submit" id="submitbtn" class="btn btn-success">
פרסם הודעה להורים
            </button>


            </form>

           </div>

        </div>
        {% endblock page_wrapper %}
